<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: YUI Loader Utility (beta): Using YUI Loader to Load the Calendar Control</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-beta-min.js"></script>
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-beta-min.js"></script>

<!--there is no custom header content for this example-->


</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em>
			<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>	
			<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
			</em>
		</p>
		<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label> 
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="fr" type="hidden" value="ush-myweb">
		<input id="ygsp" name="va" size="22"> 
		<input type="submit" value="Search" class="ygbt"></form>
	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" width="378" height="28"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: YUI Loader Utility (beta): Using YUI Loader to Load the Calendar Control</h1></div>
</div>
<div id="bd">	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">
	
	<div class="promo">
	<h1>YUI 加载器 (beta): 使用 YUI 加载器载入 Calendar 控件</h1>
	
	<div class="exampleIntro">
	<p>在这个例子中，我们使用 <a href="http://developer.yahoo.com/yui/loader/">YUI Loader Utility</a> 来引入一个 YUI 组件到页面中。本例借助 <code>YAHOO_config</code> 对象来应用 YUI 加载器。我们加载 YUI 加载器脚本文件，然后在 <code>YAHOO_config</code> 中指定我们想要载入到页面中的组件 &mdash; 以及加载完成后我们希望做的事。</p>

	<p>这个例子需要在新窗口中加载以展示此最简单的用例 &mdash; 在一个没有其他内容的页面中，加载器把 YUI 引入到一个简单的脚本环境中。</p>			
	</div>	
					
	<div class="example-container module  newWindow">
			<div id="example-canvas" class="bd">
	
		<p class="newWindowButton yui-skin-sam"><span id="newWindowLink"><span class="first-child"><a href="yl-basic_source.html" target="_blank">打开新窗口查看示例。</a></span></span>		
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">简单用例:  使用 YUI 加载器载入 Calendar 控件</h2>

<p>这个例子应用 <a href="http://developer.yahoo.com/yui/yuiloader/">YUI 加载器</a> 去载入 <a href="http://developer.yahoo.com/yui/calendar/">Calendar 控件</a>。</p>

<p>工作流程分三个步骤：</p>
<ol>
  <li><strong>创建一个 <code><a href="http://developer.yahoo.com/yui/yahoo/#config">YAHOO_config</a></code> 对象：</strong> 我们使用 <code>YAHOO_config</code> 对象来设置我们设给加载器的指示，其中包括：要加载哪个组件，是否加载可选的组件，以及组件加载后执行什么操作(本例中，当组件加载后我们在页面上实例化一个 Calendar 控件)。</li>
  <li><strong>加载 YUI 加载器脚本文件：</strong> 这个脚本在加载后，将查找已存在的 <code>YAHOO_config</code> 对象并遵循其中的任何指示来操作。</li>
  <li><strong>使用已被加载的组件：</strong> 只要 <code>YAHOO_config</code> 被 YUI 加载器进行处理，而且加载器已经引入了所需的依赖文件后，你就可以触发那些用到所需组件的代码了。你在 <code>YAHOO_config</code> 中定义那些代码（比如，指向一个回调函数)，但在加载器成功加载所有你需要的组件之前，它是不会被触发的。</li>
</ol>
<p>原始的源码看起来可能如下 &mdash; 这是本例的完整的 JavaScript 源代码：</p>
<textarea name="code" class="JScript" cols="60" rows="1"><script>
YAHOO_config = {
	//页面中还没有加载器，所以我们将使用"listener"来打印日志到控制台（如果浏览器支持 console 的话）。
	//"listener" 是一个方法，YAHOO Global 对象每次成功加载一个新的 YUI 模块的时候会触发这个方法。
	listener: function(moduleInformation) {
		if(console) {console.log(moduleInformation);}
	}, 
	
	//YAHOO_config 的 "load" 成员给 YUI 加载器提供信息：
	//我们想要加载的组件，它们存放在哪里，以及它们加载后要执行的操作。
	load: {
		require: ['calendar'], //需要什么组件？
		base: '../../build/', //它们放在哪里？
		//loadOptional: true, //是否加载所有可选的依赖文件？
		//filter: "DEBUG", 	//使用 debug 版本（或应用一些其他的过滤器）？

		//onLoadComplete 是 YUI 加载器在成功加载所有组件用将调用的函数。
		onLoadComplete: function(loader) {
		
			//一旦 YUI Calendar 控件及依赖文件已加载到页面中，
			//我们要查证目标容器是否在 DOM 在可用，然后在其中初始化缺省的日历对象。
			YAHOO.util.Event.onAvailable("calendar_container", function() {
				var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container");
				myCal.render();
			})
		}
	}
}
</script>

<!--已经创建 YAHOO_config 对象，现在我们加载 YUI 加载器；它会处理该对象并遵循我们提供的指示执行操作。-->
<script src="../../build/yuiloader/yuiloader-beta.js"></script></textarea>


<p>这段代码按以下的步骤执行：</p>
<ol>
  <li><strong>YUI 加载器加载并处理 <code>YAHOO_config</code> 对象。</strong> 它取得的指示包括：哪些组件是必须的，怎么配置它们，以及加载完成后执行哪些代码。</li>
  <li><strong>YUI 加载器检查依赖树。</strong> 加载器知道 Calendar 需要 <a href="http://developer.yahoo.com/yui/yahoo/">Yahoo Global 对象</a>，<a href="http://developer.yahoo.com/yui/dom/">Dom Collection</a>, <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>，和 Calendar 控件脚本及 Calendar 的 CSS 文件。它知道它可以取得同时包含 Yahoo，Dom 和 Event 的一个单独文件，所以它通过它插入到页面中的一个 <code>&lt;script&gt;</code> 节点去加载合并后的脚本文件。它等待文件加载完成后再接着加载 Calendar 控件脚本；这必须在 Yahoo, Dom 和 Event 已经就位后被加载。（CSS 文件通过立即在页面中插入一个 <code>&lt;link&gt;</code> 元素来加载。) </li>
  <li><strong>YUI 加载器执行它的 <code>onLoadComplete</code> 函数。</strong> 这是 <code>YAHOO_config</code> 的一个成员变量，我们在其中指定 Calenar 的实例化逻辑。</li>
</ol>
				</div>
				<div class="yui-u">
					
				
					<div id="examples">
						<h3 class='firstContent'>YUI 加载器(beta) 示例：</h3>
	
						<div id="exampleToc">
							<ul>
								<li class='selected'><a href='../yuiloader/yl-basic.html'>使用 YUI 加载器去加载 Calendar 控件</a></li>
								<li><a href='../yuiloader/yl-insert.html'>使用 YUI 加载器放置其他组件到页面中</a></li>
								<li><a href='../yuiloader/yl-addmodule.html'>使用 YUI 加载器的 addModule 方法添加自定义（非YUI）内容</a></li>
							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>更多 YUI 加载器(beta) 资源：</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/yuiloader/">用户指南</a> (外部链接)</li>
							<li><a href="../../docs/module_yuiloader.html">API 文档</a></li>
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/yuiloader.pdf">备忘表 (PDF)</a> (外部链接)</li>
						</ul>				
					</div>
					
	
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager (beta)</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button (beta)</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader (experimental)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="selected "><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test (beta)</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>

	<div id="ft">
        <p class="first">Copyright &copy; 2007 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
